<template>
  <view>
    <view class="glass"></view>
    <movie-swiper class="bg-img" :height="602" :padding="0" :radius="0" :list="list"></movie-swiper>
    <movie-search @on-search="handleSearch"></movie-search>
    <movie-swiper :list="list" :height="400" :padding="20" :radius="80" @onChange="onChange"></movie-swiper>
    <view class="movie-list">
      <movie-tag :list="movieTypeList" @on-click="handleClick"></movie-tag>
      <movie-list :list="movieTableData.list"></movie-list>
    </view>
    <movie-tabbar></movie-tabbar>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import MovieSwiper from "@/components/movie-swiper/MovieSwiper.vue"
import MovieSearch from "@/components/movie-search/MovieSearch.vue"
import MovieList from "@/components/movie-list/MovieList.vue"
import MovieTag from "@/components/movie-tag/MovieTag.vue"
import {useStore} from "vuex";
import {onLoad, onShow} from "@dcloudio/uni-app";
import MovieTabbar from "@/components/movie-tabbar/MovieTabbar.vue";
import {useGetMovieTypeListApi, usePageMovieApi} from "@/services/api";
import type {PageMovieReqVO, PageMovieRespVO} from "@/interfaces/movie";
import type {Page} from "@/interfaces/base";
import type {tabInterface} from "@/interfaces/movie-tag";

const store = useStore()
const list = [
  '/static/zjxyr.jpg',
  '/static/hbdcw.jpg',
  '/static/ks.jpeg',
]

const image = ref(list[0])
const onChange = (index: number): void => {
  image.value = list[index]
}
const pageMovieReq = ref<PageMovieReqVO>({
  size: 10,
  current: 1
})
const movieTableData = ref<Page<PageMovieRespVO>>({
  list: [],
  total: 0
})
const movieTypeList = ref<tabInterface[]>([])
const init = async ()=>{
  const {data:res} = await usePageMovieApi(pageMovieReq.value)
  const {data:typeList} = await useGetMovieTypeListApi()
  movieTypeList.value = typeList
  movieTypeList.value.unshift({
    value:0,
    label:"全部"
  })
  movieTableData.value = res
}
const handleSearch = (movieName:string) => {
  pageMovieReq.value.chineseName = movieName
  init()
}
const handleClick = (type:number):void =>{
  pageMovieReq.value.type = type
  init()
}
onShow(()=>{
  init()
})
onLoad(()=>{
  init()
})
</script>

<style scoped>
.bg-img {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

.glass {
  position: fixed;
  width: 100%;
  height: 602rpx;
  top: 0;
  left: 0;
  backdrop-filter: blur(20px);
  z-index: -1;
}

.movie-list {
  background-color: #45496A;
  border-radius: 40rpx;
  margin-top: 24rpx;
  padding: 24rpx;
}
</style>
